@mixin border-top-1px($color) {
    position: relative;

    &::before {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        border-top: 1px solid $color;
        width: 100%;
        content: ' ';
    }
}

@mixin border-bottom-1px($color) {
    position: relative;

    &::after {
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        border-bottom: 1px solid $color;
        width: 100%;
        content: ' ';
    }
}

@mixin border-left-1px($color) {
    position: relative;

    &::before {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        border-left: 1px solid $color;
        height: 100%;
        content: ' ';
    }
}

@mixin border-right-1px($color) {
    position: relative;

    &::after {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        border-right: 1px solid $color;
        height: 100%;
        content: ' ';
    }
}

@mixin border-none {
    &::after {
        border: none;
    }

    &::before {
        border: none;
    }
}

@media (-webkit-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5) {
    .border-horizontal-1px {
        &::after {
            -webkit-transform: scaleY(0.66);
            transform: scaleY(0.66);
        }
    }

    .border-vertical-1px {
        &::after {
            -webkit-transform: scaleX(0.66);
            transform: scaleX(0.66);
        }
    }
}

@media (-webkit-device-pixel-ratio: 2),
(min-device-pixel-ratio: 2) {
    .border-horizontal-1px {
        &::after {
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    }

    .border-vertical-1px {
        &::after {
            -webkit-transform: scaleX(0.5);
            transform: scaleX(0.5);
        }
    }
}

@media (-webkit-device-pixel-ratio: 3),
(min-device-pixel-ratio: 3) {
    .border-horizontal-1px {
        &::after {
            -webkit-transform: scaleY(0.33);
            transform: scaleY(0.33);
        }
    }

    .border-vertical-1px {
        &::after {
            -webkit-transform: scaleX(0.33);
            transform: scaleX(0.33);
        }
    }
}